<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>js模板引擎测试</title>
	<link type="text/css" rel="stylesheet" media="all" href="../css/style.css"/>
	<script type="text/javascript">
		function $(id)
		{
		  return document.getElementById(id);
		}
		var floatBox = !!window.floatBox || {};
		
		floatBox.getViewportWidth = function(){
			var width=0;
			if(document.documentElement && document.documentElement.clientWidth){
			width=document.documentElement.clientWidth;}
			else if(document.body && document.body.clientWidth){
			width=document.body.clientWidth;}
			else if(window.innerWidth){
			width=window.innerWidth-18;}
			return width;
		}
		
		
		floatBox.getViewportHeight = function() {
			var height=0;
			if(window.innerHeight){
			height=window.innerHeight-18;}
			else if(document.documentElement&&document.documentElement.clientHeight){
			height=document.documentElement.clientHeight;}
			else if(document.body&&document.body.clientHeight){
			height=document.body.clientHeight;}
			return height;
		}
		
		floatBox.getViewportScrollX = function(){
			var scrollX=0;
			if(document.documentElement&&document.documentElement.scrollLeft){
			scrollX=document.documentElement.scrollLeft;}
			else if(document.body&&document.body.scrollLeft){
			scrollX=document.body.scrollLeft;}
			else if(window.pageXOffset){
			scrollX=window.pageXOffset;}
			else if(window.scrollX){
			scrollX=window.scrollX;}
			return scrollX;
		}
		
		floatBox.getViewportScrollY=function() {
			var scrollY=0;
			if(document.documentElement&&document.documentElement.scrollTop){
			scrollY=document.documentElement.scrollTop;}
			else if(document.body&&document.body.scrollTop){
			scrollY=document.body.scrollTop;}
			else if(window.pageYOffset){
			scrollY=window.pageYOffset;}
			else if(window.scrollY){
			scrollY=window.scrollY;}
			return scrollY;
		}
		
		function scrollTip()
		{
		   $("msgtip").style.top = floatBox.getViewportHeight() + floatBox.getViewportScrollY() - $("msgtip").offsetHeight + "px"; 
		   $("msgtip").style.left = floatBox.getViewportWidth() + floatBox.getViewportScrollX() - $("msgtip").offsetWidth + "px";
		}
		
		window.onload = window.onscroll = scrollTip;
	</script>
</head>

<body>
	<div style="width:960px; height:1800px; margin:0 auto;">
		<div id="msgtip" style="position:absolute;top:0;left:0;width:300px;height:180px;border:1px solid #ddd">浮动框测试</div>
	</div>
</body>
</html>
